<template>
    <div id="fa">
        <div className="top">
            <span :class="{sp1:true,sp2:flag2==false}" @:mouseenter="the_not(true)">
                <el-icon class="el-icon"><Flag /></el-icon>
                大众健康
            </span>
            <span :class="{sp1:true,sp2:flag2==true}" @:mouseenter="the_not(false)">
                <el-icon class="el-icon"><Tickets /></el-icon>
                生活手册
            </span>
        </div>
        <div className="down">
            <div className="down_up">
                <span :class="{ds2:flag==index}" @:click="change(index,el)" v-for="(el,index) in arr1" key="index">
                    {{ el }}
                </span>
            </div>
            <div className="down_off">
                <div @:click="go(el2)" v-for="(el2,index2) in arr2" key="index2">
                    <li>
                        <span>{{ el2 }}</span>
                    </li>
                </div>
                <div @:click="go('分类查询')">
                    <li>
                        <span>
                            更多》
                        </span>
                    </li>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">

import { ref, toRefs, toRef } from 'vue';
import store from "@/store/S_zc"
import { useRouter } from 'vue-router';
let router = useRouter()

// 

let sto = store().msg

let publics = toRefs(sto.publics)

let data1 = {
    getda1() {
        // return toRefs(sto.publics)
        return Object.keys(toRefs(sto.publics))
    },
    getda2() {
        // return toRefs(sto.life)
        return Object.keys(toRefs(sto.life))
    },
    getda3(x: number = 0) {
        return sto.publics[arr1.value[x]]
    },
    getda4(x: number = 0) {
        return sto.life[arr1.value[x]]
    }
}
let arr1 = ref(data1.getda1())

let arr2 = ref(data1.getda3(0))

let flag = ref(0), flag2:any = ref(true)
function change(x: number, y: string) {
    flag.value = x
    if (flag2.value) {
        arr2.value = data1.getda3(x)
    } else {
        arr2.value = data1.getda4(x)
    }
}

function the_not(x:boolean){
    flag2.value=x
    if (flag2.value) {
        arr1.value = data1.getda1()
        arr2.value = data1.getda3()
    } else {
        arr1.value = data1.getda2()
        arr2.value = data1.getda4()
    }
}


function change2(x: string) {
    console.log(x)
    // publics=toRefs(sto.msg.life)
    // arr1=Object.keys(x)
    // publics = toRefs(sto.msg.life)
}

function go(x: string, y?: string) {
    // router.push("",paemise:{mark:x})
    console.log("second.vue go() 参数 to 分类查询 ", x)
}
// publics.女性健康
</script>

<style scoped  lang="scss">
#fa {
    background-color: white;
    margin-bottom: 20px;
    min-height: 354px;
}

span {
    display: inline-block;
    background-color: white;
    text-align: center;
}

.sp1 {
    font-size: 20px;
    color: #00c792;
    display: inline-block;
    width: 50%;
    height: 80px;
    text-align: center;
    line-height: 80px;

    // &:hover {
    //     background-color: #FAFAFA;
    // }
}
.sp2{
    color: #ACB0B6;
    opacity: 0.5;
    background-color: #FAFAFA;
}
.el-icon{
    font-size: 20px;
    position: relative;
    top: 4px;
    left: 3ppx;
}

.down_up {
    width: 1008px;
    font-size: 13px;
    height: 76px;
    margin: 0 30px;
    padding-top: 28px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    span {
        width: 100px;
        height: 18px;
        border-radius: 5px;
        background-color: #F2F3F5;
        text-align: center;
        line-height: 18px;
        padding: 4px 0;
        margin: 0 12px 12px 0;

        &:hover {
            background-color: #00c792;
            color: white;
        }
    }

    .ds2 {
        background-color: #00c792;
        color: white;
    }
}

.down_off {
    width: 1120px;
    // min-height: 144px;
    padding: 28px 30px 8px 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;


    div {
        width: 128px;
        height: 16px;
        text-align: left;
        font-size: 14px;
        margin-left: 4px;
        margin-bottom: 32PX;

        li {

            // margin-left: -5px;
            &::marker {
                color: #D0D3D9;
            }

            span {
                &:hover {
                    text-decoration: underline;
                    color: #00c792;
                }
            }
        }
    }
}
</style>